<template>
    <div class="con">
        <div class="in">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="账户" prop="account">
                <el-input v-model="ruleForm.account"></el-input>
            </el-form-item>

            <el-form-item label="密码" prop="upwd">
                <el-input v-model="ruleForm.upwd"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
                <el-button type="primary" @click="register('ruleForm')">注册</el-button>
            </el-form-item>

        </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data(){
            return{
                ruleForm:{
                    account:'',
                    upwd:'123456'
                },rules: {
                    account: [
                        {required: true, message: '请输入账号', trigger: 'blur'},
                        {min: 3, max:7, message: '长度在 3 到 7个字符', trigger: 'blur'}
                    ],  upwd: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur'}
                    ]
                }
            }
        },
        methods:{
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        // alert('submit!');
                        this.success();
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            success(){
                let account=this.ruleForm.account;
                let upwd=this.ruleForm.upwd;
                console.log(account+"   "+upwd)
                this.$http.get("http://localhost:8081/user/login?account=" + account + "&upwd=" + upwd, {xhrFields: {withCredentials: true}}, {crossDomain: true}).then(
                    req=> {
                        console.log("req:"+req)
                        console.log(req.data)
                        if (req.data != null) {
                            console.log(this.$router.history)
                            //获取用户的id
                            let id=req.data.id;
                            //获取用户名
                            let account1=req.data.account;
                            //获取用户身份
                            let role = req.data.role;
                            //获取用户头像
                            let avatar = req.data.avatar;
                            console.log(id+" "+account1+"  "+role)
                            //将用户名编号和用户名存入全局store中
                            this.$store.commit("userId",id);
                            this.$store.commit("userAccount",account1);
                            this.$store.commit("userAvatar",avatar)
                            //将全局store中的数据存入sessionStore中
                            sessionStorage.setItem("userId",this.$store.state.userId);
                            sessionStorage.setItem("account",this.$store.state.account);
                            sessionStorage.setItem("avatar",this.$store.state.avatar);


                            //获取到数据,跳转到index  this.$router
                            if(role===1){
                                this.$router.push("index");
                            }else if(role===0){
                                this.$router.push("admin");
                            }

                        }else{
                            alert("用户名或密码不对");
                            this.$refs[formName].resetFields();
                        }
                    })


            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            register(){
                this.$router.push("register")
            }

        },
        components:{

        }
    }
</script>

<style scoped>
.con{
    margin-top: 10%;
    margin-left: 50%; /*margin-top: 50%;*/
    transform:translate(-50%);
    width: 400px;
    height: 300px;
    border: solid 2px darkgrey;

}
    .in{
        margin-top: 20%;

    }
</style>